<script lang="ts" setup>
import type { VxeGridProps } from '#/adapter';

import { ref } from 'vue';

import { Page } from '@vben/common-ui';

import { Button, InputSearch, Modal, Popconfirm } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter';
import { deleteLogById, getLogsApi } from '#/api/core/syslog';
import { $t } from '#/locales';

interface LogType {
  id: string;
  username: string;
  action: string;
  details: string;
  createTime: string;
}

const searchText = ref('');
const selectedRows = ref<LogType[]>([]);

const gridOptions: VxeGridProps<LogType> = {
  checkboxConfig: {
    highlight: true,
  },
  columns: [
    { title: '', type: 'checkbox', width: 50 },
    {
      field: 'username',
      title: $t('syslog.columns.username'),
      align: 'left',
      width: 100,
    },
    { field: 'action', title: $t('syslog.columns.action'), width: 150 },
    { field: 'details', title: $t('syslog.columns.details') },
    { field: 'createTime', title: $t('syslog.columns.createTime'), width: 150 },
    {
      field: 'operate',
      fixed: 'right',
      slots: { default: 'action' },
      title: $t('syslog.columns.operate'),
      width: 100,
    },
  ],
  height: 'auto',
  keepSource: true,
  pagerConfig: {},
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        return await getLogsApi({
          page: page.currentPage,
          pageSize: page.pageSize,
          search: searchText.value,
        });
      },
    },
  },
};

const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });

function deleteLog(row: LogType) {
  deleteLogById(row.id);
  gridApi.reload();
}

function handleSearch() {
  gridApi.reload();
}

function handleDeleteSelected() {
  if (selectedRows.value.length === 0) return;

  const ids = selectedRows.value.map((row) => row.id);

  Modal.confirm({
    title: $t('syslog.delete.title'),
    content: $t('syslog.delete.batchConfirm', { count: ids.length }),
    okText: $t('common.yes'),
    cancelText: $t('common.no'),
    async onOk() {
      await Promise.all(ids.map((id) => deleteLogById(id)));
      selectedRows.value = [];
      gridApi.reload();
    },
  });
}

const gridEvents = {
  checkboxChange({ records }: { records: LogType[] }) {
    selectedRows.value = records;
  },
  checkboxAll({ records }: { records: LogType[] }) {
    selectedRows.value = records;
  },
};
</script>

<template>
  <Page auto-content-height>
    <Grid :grid-events="gridEvents">
      <template #toolbar-actions>
        <Button
          v-if="selectedRows.length > 0"
          class="ml-2"
          danger
          type="primary"
          @click="handleDeleteSelected"
        >
          {{ $t('common.action.delete') }}
        </Button>
      </template>
      <template #toolbar-tools>
        <InputSearch
          v-model:value="searchText"
          :placeholder="$t('common.search')"
          @search="handleSearch"
        />
      </template>
      <template #action="{ row }">
        <Popconfirm
          :cancel-text="$t('common.no')"
          :ok-text="$t('common.yes')"
          :title="$t('syslog.delete.confirm')"
          @confirm="async () => await deleteLog(row)"
        >
          <Button style="color: red" type="link">
            {{ $t('common.action.delete') }}
          </Button>
        </Popconfirm>
      </template>
    </Grid>
  </Page>
</template>
